/*
 * @Author: 周海 zhouhaib@yonyou.com
 * @Date: 2022-12-18 14:20:51
 * @LastEditors: Zhouhai 497675647@qq.com
 * @LastEditTime: 2024-04-16 16:17:47
 */
import React, { useState } from 'react';
import { Input, Modal } from 'antd';
import Cron from './cron'
import './index.less';

export type CronInputProps = {
    value?: string;
    onChange?: (values: string) => void;
};

const CronInput: React.FC<CronInputProps> = (props) => {
    const { value = "* * * * * ? *", onChange } = props;
    const [visible, setVisible] = useState<boolean>(false);

    const [cronValue, setCronValue] = useState<string>(value);
    const handleOk = () => {
        onChange?.(cronValue)
        setVisible(false);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const handleReset = () => {
        setCronValue("* * * * * ? *")
    };

    return (
        <div>
            <Input value={value} onClick={() => {
                setVisible(true);
                setCronValue(value)
            }} />
            <Modal
                open={visible}
                centered={true}
                closable ={false}
                styles={
                    {
                        body: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%',padding: '0px'}
                    }
                }
                destroyOnClose
                onOk={handleOk}
                onCancel={handleCancel}
                maskClosable={false}
                width={'auto'}
            >
                <Cron
                    style={{width: 700,height: '500px',padding: '10px'}}
                    onChange={setCronValue}
                    value={cronValue}
                    lang='zh_CN'
                    type={['second', 'minute', 'hour', 'day', 'month', 'week']}
                />
            </Modal>
        </div>
    );
}

export default CronInput;